<template>
	<view class="container">
		<nav-header title="链接邀请" custom-nav>
		</nav-header>
		<view class="to-examine">
			<up-cell-group>
				<up-cell v-for="(item, index) in methods" :key="index" :title="item.title" @click="selectMethod(index)">
					<template v-slot:value>
						<svg-icon v-if="selectedMethod === index" icon="check-1" :width="42"></svg-icon>
					</template>
				</up-cell>
			</up-cell-group>
		</view>
		<view class="link-time">
			<view>链接有效期</view>
			<view class="fc">
				<view style="width: 100%;">
					<uni-data-select v-model="value" :clear="false" :localdata="range" @change="change"
						class="data-select"></uni-data-select>
				</view>
				<view><button class="custom-button">复制链接</button></view>
			</view>
		</view>
		<view class="info">*链接长期有效，更换到其他有效期后，其他邀请链接全部失效</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 示例数据
	const methods = ref([{
			title: '无需审核'
		},
		{
			title: '需要管理员同意'
		},
	]);

	// 选中的方法索引
	const selectedMethod = ref(0);

	// 选择方法的处理函数
	const selectMethod = (index) => {
		selectedMethod.value = index;
		console.log("结果", selectedMethod.value)
	};

	// 示例数据
	const range = ref([{
			value: '0',
			text: '3天'
		},
		{
			value: '1',
			text: '7天'
		},
		{
			value: '2',
			text: '14天'
		},
		{
			value: '3',
			text: '长期有效'
		},
	]);

	// 当前选中的值
	const value = ref('3');

	// 选择变化时的处理函数
	const change = (event) => {
		console.log('Selected value:', event);
	};
</script>


<style lang="scss" scoped>
	.to-examine {
		background-color: #fff;
		border-radius: 15rpx;
	}

	.link-time {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 10rpx 30rpx;

		.fc {
			width: 100%;
			display: flex;
			align-items: center;
		}
	}

	.custom-button {
		width: 200rpx;
		background-color: $brand-500;
		/* 修改背景色为蓝色 */
		color: $white;
		/* 文字颜色为白色 */
		border: none;
		/* 去掉边框 */
		font-size: 14px;
		/* 字体大小 */
	}

	.info {
		color: $warning-500;
		padding: 10rpx 30rpx;
		font-size: 24rpx;
	}
</style>